<template>
    <div style="display: inline-block;">
        <span class="isChange" v-if="tabValue.isChange"></span>
        <span class="textStr" :class="staticClass[tabValue.oldValue.status]">
            <i class="el-icon-star-on"></i>
        </span>
        <span class="textStr" :class="typeClass[tabValue.oldValue.type]">{{tabValue.oldValue.type}}</span>
        <span class="tagTitle">{{tabValue.oldValue.title}}</span>
    </div>
</template>

<script>
    export default {
        props: ['tabValue'],
        data() {
            return {
                typeClass: {
                    GET: 'text_green',
                    POST: 'text_orange',
                    PUT: 'text_blue',
                    DEL: 'text_red'
                },
                staticClass: {
                    0: 'text_orange',
                    1: 'text_blue',
                    2: 'text_red',
                    3: 'text_green',
                    4: 'text_gray',
                    undefined: 'text_transparent',
                    null: 'text_transparent',
                },
                isChange: false,
            }
        },
    }
</script>

<style scope>
    .isChange {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #aaa;
        margin: 0 5px 0 0;
        position: absolute;
        top: 15px;
        right: 8px;
        z-index: 5;
        pointer-events: none;
    }

    .tagTitle {
        color: #999999;
    }

    .textStr {
        font-weight: bold;
        margin: 0 5px 0 0;
    }
</style>